<template>
	<view class="payHTML">
		<view class="title">请选择付费方式</view>
		<view class="payHTML_type">
			<!-- #ifdef H5 -->
			<view :class="{'activePAY': selectedPay == 2}" @click="selectPayment(2)">支付宝</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view :class="{'activePAY': selectedPay == 1}" @click="selectPayment(1)">微信</view>
			<!-- #endif -->
		</view>
		<view class="money-type">
			<view :class="{'active': selectedMoneyType == 1}" @click="selectMoneyType(1,needs.one_money)">
				{{needs.one_money}}/次</view>
			<view :class="{'active': selectedMoneyType == 2}" @click="selectMoneyType(2,needs.month_money)">
				{{needs.month_money}}/月</view>
			<view :class="{'active': selectedMoneyType == 3}" @click="selectMoneyType(3,needs.quarter_money)">
				{{needs.quarter_money}}/季</view>
		</view>	
		<view class="">
			<u-popup :show="show" @close="close" mode="bottom">
				<view class="Beethoven">
					<view class="compost">
						请点击授权手机号
					</view>
					<view class="yserre">
						<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber"
							style="background-color: #ff6600; color: #fff; font-size: 28rpx;">授权手机号</button>
					</view>
				</view>
			</u-popup>
		</view> 
		


		<view class="bottomPay">
			共计：￥{{moneys}}
			<view class="bottomType" @click="government()">支付</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				value2: '',
				selectedPay: '', // 选中的支付方式
				selectedMoneyType: '', // 选中的金额类型
				accept: {},
				needs: {},
				moneys: '0.00',
				show: false,
			}
		},
		
		onLoad(o) {
			this.accept = JSON.parse(decodeURIComponent(o.pure))
			this.needs = {
				id: this.accept.id,
				month_money: this.accept.month, //月
				one_money: this.accept.one, // 天
				quarter_money: this.accept.quarter //季度
			}
			// if (this.userInfo != null && this.userInfo != 'null') {
			// 	this.getUserInfo()
			// }
		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			selectPayment(type) {
				this.selectedPay = type; // 设置选中的支付方式
			},
			selectMoneyType(type, money) {
				this.selectedMoneyType = type; // 设置选中的金额类型
				this.moneys = money //选中的金额
			},
			government() {
				let param = {
					dynamic_id: this.needs.id,
					pay_types: this.selectedMoneyType,
					money: this.moneys
				}
			// 	var that = this
			// console.log(this.userInfo.phone,'aaaaaaaaaaaaaaaaaa')			 
			// 	if(this.userInfo.phone != ''){
			// 		console.log(this.userInfo.phone,'bbbbbbbbbbbbbbb')	
			// 		console.log(this.show ,'this.show')
			// 		this.show = true
			// 		return
			// 	}
				
				
				if(this.selectedPay == 1){
					this.$api.WeChatPay(param).then(res => {
						uni.requestPayment({
							// body: 'wxpay', // 支付类型微信支付wxpay/支付宝支付alipay 
							provider: 'wxpay', // 支付类型微信支付wxpay/支付宝支付alipay
							timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
							nonceStr: res.data.nonceStr, // 随机字符串
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							openid: res.data.openid,
							success() {
								setTimeout((res) => {
									const id = that.needs.id
									uni.$u.route(
										'/pages/home/opusDetail/opusDetail', {
											id
										})
								}, 500)
							},
							fail(e) {
								uni.$u.toast('支付失败');
								uni.switchTab({
									url: '/pages/tabBarHome/home'
								})

							},
						})
					})
				} else if(this.selectedPay == 2){
					this.$api.AlipayPayment(param).then(res=>{
						
						console.log(res,'resaaaaaaaaaaaaaaaa')
						// return
						 const div = document.createElement('div');
						 // 渲染这个div中的表单（res.data.pay_img就是后端返回的表单）
						 div.innerHTML = res.data;
						 // 进行元素追加渲染
						 document.body.appendChild(div);
						 // 提交表单(alipaysubmit这个名字是和表单上的name一致的，要注意别搞错了)
						 document.forms['alipaysubmit'].submit();
					})
				}
				
			},
			// decryptPhoneNumber(e) {
			// 	uni.login({
			// 		provider: 'weixin',
			// 		success: (res) => {
			// 			console.log(res,'res')
			// 		this.$api.MobilePhone({
			// 				code: e.detail.code,
			// 				// phone:
			// 			}).then(res => {
			// 				this.show = false
			// 				this.getUserInfo()
			// 			})
			// 		},
			// 		fail: () => {
			// 			reject('微信授权手机号失败');
			// 		}
			// 	})
			// },
		 
		}
	}
</script>

<style scoped lang="scss">
	.activePAY {
		border: 1px solid #ff6600 !important;
		/* 选中时边框变红 */
		color: #ff6600 !important;
		/* 选中时字体变红 */
	}

	.active {
		border: 1px #ff6600 red !important;
		/* 选中时边框变红 */
		color: #ff6600 !important;
		/* 选中时字体变红 */
	}


	.payHTML {
		width: 100%;
	}

	.title {
		width: 90%;
		margin: auto;
		line-height: 4;
	}

	.payHTML_type {
		width: 90%;
		margin: auto;
		display: flex;
		justify-content: space-around;

		view {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 1px #dadbde solid;
			text-align: center;
			color: #dadbde;
		}
	}

	.money-type {
		width: 90%;
		margin: auto;
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;

		view {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 1px #dadbde solid;
			color: #dadbde;
		}
	}


	.bottomPay {
		width: 100%;
		line-height: 100rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

		/* 阴影效果 */
		.bottomType {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			border: #ff6600 1px solid;
			text-align: center;
			background-color: #ff6600;
			color: #fff;
			font-size: 24rpx;
		}
	}
	.Beethoven {
		margin: 30rpx;
		border-radius: 10rpx;
	
		.compost {
			text-align: center;
			padding: 20rpx;
			font-size: 28rpx;
			color: #000000E6;
		}
	
		.yserre {
			margin: 20rpx;
		}
	}
</style>